// Wait until the DOM has loaded before querying the document
$(document).ready(function() {
    $('tr.category').each(function() {

        var $content = $(this).find('td.text');
        var $modifyTd = $(this).find('td.modify');
        var $modifybtn = $(this).find('a.mcat');
        var $delete = $(this).find('a.dcat');

        $(this).on('click', 'a.mcat', function(e) {
            
            $currentContent = $content.text();
            
            $content.empty()
                    .append('<input type="text" value="' + $currentContent + '"/>');
            $(this).removeClass('secondary')
                    .addClass('success')
                    .text('Salvar')
                    .after(' <a href="#" class="cancel small button radius secondary">Cancelar</a>');
            $('a.cancel').on('click', function(e){
                $content.html('').text($currentContent);
                $(this).remove();
                $modifybtn.removeClass('success').addClass('secondary').text('Modificar');
            });
            e.preventDefault();

        });

    });
});
